<template>
	<view class="app">
		<load :ready="ready"></load>

		<u-form :model="form" label-position="top" ref="uForm">
			<u-form-item label="操作类型" :required="true">
				<u-radio-group v-model="form.type">
					<u-radio v-for="(item, index) in typeList" :key="index" :name="item.value" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item v-if="form.type != 2" label="流入站点" prop="siteLabel" :required="true">
				<u-input  v-model="form.siteLabel" type="select" @click="handleShowSite('site')" placeholder="请输入" />
			</u-form-item>
			
		
		
			<u-form-item label="钢瓶编号" :required="true">
				<view>
                    <view class="bottle_number">
                        钢瓶数量:{{form.bottle_code.length}}
                    	<!-- <view class="add" @click="handleAdd()">添加</view> -->
                    </view>
				<!-- 	<view>
						{{bottleNum}}
					</view> -->
					<view class="int-wrap" style="display: block;">
						<view class="int">
							
							<!-- <textarea v-model="bottleNum" @input="handleInput" class="input2" placeholder-class="input2ply"  placeholder="请输入6位正确钢瓶编码"></textarea>
							 -->
							 
							 
							 <input style="height: 40px;" v-model="bottleNum" type="number" @input="handleInput" placeholder="请输入6位正确钢瓶编码" />
						
							 <!-- @confirm="handleAdd(e)" -->
							<!-- <u-input v-model="bottleNum" @confirm="handleAdd(e)" placeholder="请选入编号" /> -->
						</view>
						
					<!-- 	<view class="int" style="background: #fff; margin-top:20px">
						<input type="number" v-model="bottleNum" @input="handleInput" class="input2" placeholder-class="input2ply"  placeholder="请输入6位正确钢瓶编码"></input>
						</view>
						 -->
							
						<!-- <view class="add" @click="handleAdd()">添加</view> -->
					</view>
					<view class="tag-wrap">
						<view class="tag" v-for="(item, index) in form.bottle_code" >
							<u-tag :text="item" :closeable="true" @close="onClose(index)" @click="handleTag(item,index)" type="info " />
						</view>	
					</view>
				</view>
			</u-form-item>
			<view style="text-align: right; padding-top: 10rpx;">
				<view class="btn-add" @click="handleCode()">扫码</view>
			</view>	
			<!-- <view class="tips">使用扫码枪操作</view>	 -->
			
			
			<u-gap height="100"></u-gap>
			<view class="btnbox">
				<u-button type="primary" shape="circle" @click="submit" :custom-style="btnStyle">提交</u-button>
			</view>
		</u-form>
		
		<u-popup v-model="showEdit" mode="center" width="620rpx" border-radius="32">
			<view class="send-popup">
				<view class="btn-close">
					<u-icon name="close" @click="showEdit = false" size="30"></u-icon>
				</view>
				<view class="title">
					修改编号
				</view>
				<view class="item">
					<view class="info">
						<u-input type="textarea" placeholder="请输入备注" v-model="value" :border="true"></u-input>
					</view>
				</view>
				
				<view class="btnbox">
					<u-button type="primary" shape="circle" @click="submitInput()" :custom-style="btnStyle2">确定</u-button>
				</view>
			</view>
		</u-popup>
		
		<u-select v-model="showSite" @confirm="confirm" :list="siteList"></u-select>
		
		
	</view>
</template>
<style>
 .bottle_number{
    position: absolute;
    top: 10rpx;
    right: 0;             
 }
</style>

<script>
	import {
		mapState,
		mapActions,
		mapMutations,
		mapGetters
	} from 'vuex';
	import {
		mixinsBase
	} from '@/common/js/mixins';
	import throttle from '@/common/js/throttle.js';
	let that;
	export default {
		mixins: [mixinsBase],
		components: {
		},
		data() {
			return {
				navbar: {},
				ready: true,
				form: {
					type:7,
					my_site:'',
					site:'',
					bottle_code:[],
				},
				btnStyle: this.$config.btnStyle,
               
				btnStyle2:{
					background: '#0093dd',
					borderRadius: '16px',
					padding:'0 15px',
					marginLeft: '5px'
				},
				verCode: {
					text: '获取验证码',
					code: '',
					isDownIng: false,
					i: 60,
					t: null,
				},
				background: {
					backgroundColor: '#f7f7f7'
				},
				lineStyle: {
					right: '20rpx',
					bottom: '4px'
				},
				radio: '',
				switchVal: false,
				typeList: [{
						name: '调拨',
						value: 7,
					},
				],
				addRes:{},
				value:'',
				showEdit:false,
				bottleNum:'',
				tagIndex:0,
				siteType:'',
				showSite:false,
				siteList:[],
				info:{},
				rules: {
					// 字段名称
					// siteLabel: [{
					// 		required: true,
					// 		message: '请选择流入站点',
					// 		trigger: ['change', 'blur'],
					// 	},
					// ],
					// mySiteLabel: [{
					// 		required: true,
					// 		message: '请选择所属站点',
					// 		trigger: ['change', 'blur'],
					// 	},
					// ],
				}
			};
		},
		onLoad(o) {
			this.id = o.id;
			this.form.my_site = o.id;
			that = this;
			this.getInit();
			this.innerAudioContext = uni.createInnerAudioContext();
			this.innerAudioContext.src = '/static/mp3/err.mp3';
			this.innerAudioContext.onPlay(() => {
			  console.log('开始播放');
			});
			 // this.innerAudioContext.play();
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			// #ifdef H5
			this.$common.h5SetTitle('');
			// #endif
		},
		onUnload() {
			that = null
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			// this.getInit(data=>{
			//      uni.stopPullDownRefresh();
			//      common.showTip('刷新成功');
			// });
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
			//       return {
			// 	// path,
			// 	imageUrl:config.shareImg,
			// 	// title
			// }
		},
		methods: {
			
			onClose(index){
				console.log(index)
				this.form.bottle_code.splice(index, 1)
			},
			handleCode(){
				// 调起条码扫描
				const that = this;
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						if(res.result.length != 6){
							that.innerAudioContext.play();
							that.$common.showTip('编码数错误');
							return
						} 
						if(that.isHas(res.result) != -1 ){
							that.innerAudioContext.play();
							that.$common.showTip('编码重复');
							return
						} 
						if(that.form.type == 7 && that.isHasTb(res.result) == -1 ){
							that.innerAudioContext.play();
							that.$common.showTip('当前站点不存在编码');
							return
						}
						if(that.form.type == 2 && that.isHasCz(res.result) == -1 ){
							that.innerAudioContext.play();
							that.$common.showTip('当前站点不存在编码');
							return
						}
						that.form.bottle_code.push(res.result)
					},
					fail(err){
						console.log(err)
						that.$common.showTip(err.errMsg);
						that.innerAudioContext.play();
					},
				});
			},
			
			isHas(data ){
				return this.form.bottle_code.findIndex(item=>{
					return item == data
				})
			},
			//调拨判断
			isHasTb(data){
				return [...this.info.shi.data, ...this.info.kong.data].findIndex(item=>{
					return item.code == data
				})
			},
			//充装判断
			isHasCz(data){
				return this.info.kong.data.findIndex(item=>{
					return item.code == data
				})
			},
			async getInit() {
				let res;
				let res2;
			    try {
			        res = await this.$api.site();
					res2 = await this.$api.siteDetail({
						id:this.id,
					})
			    } catch (e) {
			        uni.hideLoading();
			        console.log('err', e);
			    }
			    if (res.data.code == this.$config.RESOK) {
			       let list = res.data.data || [];
				   let siteList = [];
				   list.forEach(item=>{
					   if(item.id != this.id){
						   siteList.push({
							   label:item.name,
							   value:item.id,
						   })
					   }
				   })
			       this.siteList = siteList;
			    } 
				if (res2.data.code == this.$config.RESOK) {
					this.info = res2.data.data;
					if(this.info.type == 1){
						// 充装站应有调度、充装
						this.typeList.push({
							name: '充装',
							value: 2,
						})
					} else{
						// 供应站不能充装
					}
					// this.ready = true
				} 
			},
			confirm(e){
				const data = e[0];
				if(this.siteType == 'site'){
					this.$set(this.form, 'site', data.value);
					this.$set(this.form, 'siteLabel', data.label);
				} else if(this.siteType == 'my_site'){
					this.$set(this.form, 'my_site', data.value);
					this.$set(this.form, 'mySiteLabel', data.label);
				}
			},
			handleShowSite(type){
				this.siteType = type;
				this.showSite = true;
			},
			async submit() {
				console.log('submit')
				let istrue = true
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
						istrue = false
					}
				});
				console.log('istrue', istrue);
				if(!this.form.bottle_code.length){
					this.$common.showTip('请输入钢瓶编号')
					return
				}
				if (!istrue) return
				this.isLoading = true
				let params  = {
					...this.form
				}
				if(this.form.type == 2){
					params.site = this.id;
				}
				let res = await this.$api.saveBottle(params);
				this.isLoading = false;
				console.log(res);
				if (res.data.code == this.$config.RESOK) {
					this.$common.showTip(res.data.msg);
					setTimeout(() => {
						uni.navigateBack()
					}, this.$config.timeLoad);
				} else {
					this.$message.error(res.data.msg);
				}
			},
			handleAdd(e){
				console.log(e)
				if(this.bottleNum.length != 6){
					this.innerAudioContext.play();
					this.$common.showTip('编码数错误');
					return
				}
				if(this.isHas(this.bottleNum) != -1 ){
					this.innerAudioContext.play();
					this.$common.showTip('编码重复');
					return
				} 
				if(this.form.type == 7 && this.isHasTb(this.bottleNum) == -1 ){
					this.innerAudioContext.play();
					this.$common.showTip('当前站点不存在编码');
					return
				}
				if(this.form.type == 2 && this.isHasCz(this.bottleNum) == -1 ){
					this.innerAudioContext.play();
					this.$common.showTip('当前站点不存在编码');
					return
				}
				this.form.bottle_code.push(this.bottleNum )
				this.bottleNum = '';
			},
			
			handleInput: throttle(function(e) {
			   		console.log('handleInput ee', e)
			   		let value = this.$u.trim(e.detail.value, 'all')
			   		console.log('value', value)
			   		this.bottleNum =value;
			   		if(value.length > 6){
			   			this.innerAudioContext.play();
			   			this.$common.showTip('编码数错误');
			   			this.bottleNum = '';
			   		}
			   		if(value.length == 6){
			   			if(this.isHas(this.bottleNum) != -1 ){
			   				this.bottleNum = '';
			   				this.innerAudioContext.play();
			   				this.$common.showTip('编码重复');
			   				return
			   			} 
			   			if(this.form.type == 7 && this.isHasTb(this.bottleNum) == -1 ){
			   				this.bottleNum = '';
			   				this.innerAudioContext.play();
			   				this.$common.showTip('当前站点不存在编码');
			   				return
			   			}
			   			if(this.form.type == 2 && this.isHasCz(this.bottleNum) == -1 ){
			   				this.bottleNum = '';
			   				this.innerAudioContext.play();
			   				this.$common.showTip('当前站点不存在编码');
			   				return
			   			}
			   			this.form.bottle_code.push(this.bottleNum )
						this.bottleNum = '';
					}
					if(value.length < 6){
						this.bottleNum = '';
					}
			}, 1000, {
				leading:false
			}),
			// handleInput(e){
			// 		console.log('handleInput ee', e)
			// 		let value = this.$u.trim(e.detail.value, 'all')
			// 		console.log('value', value)
			// 		this.bottleNum =value;
					
			// 		if(value.length > 6){
			// 			this.innerAudioContext.play();
			// 			this.$common.showTip('编码数错误');
			// 			this.bottleNum = '';
			// 		}
			// 		if(value.length == 6){
			// 			if(this.isHas(this.bottleNum) != -1 ){
			// 				this.bottleNum = '';
			// 				this.innerAudioContext.play();
			// 				this.$common.showTip('编码重复');
			// 				return
			// 			} 
			// 			if(this.form.type == 7 && this.isHasTb(this.bottleNum) == -1 ){
			// 				this.bottleNum = '';
			// 				this.innerAudioContext.play();
			// 				this.$common.showTip('当前站点不存在编码');
			// 				return
			// 			}
			// 			if(this.form.type == 2 && this.isHasCz(this.bottleNum) == -1 ){
			// 				this.bottleNum = '';
			// 				this.innerAudioContext.play();
			// 				this.$common.showTip('当前站点不存在编码');
			// 				return
			// 			}
			// 			this.form.bottle_code.push(this.bottleNum )
			// 			this.bottleNum = '';
			// 		}
			// },
			submitInput(){
				if(this.value.length != 6){
					this.innerAudioContext.play();
					this.$common.showTip('编码数错误');
					return
				}
				if(this.isHas(this.value) != -1 ){
					this.innerAudioContext.play();
					this.$common.showTip('编码重复');
					return
				} 
				if(this.form.type == 7 && this.isHasTb(this.value) == -1 ){
					this.innerAudioContext.play();
					this.$common.showTip('当前站点不存在编码');
					return
				}
				if(this.form.type == 2 && this.isHasCz(this.value) == -1 ){
					this.innerAudioContext.play();
					this.$common.showTip('当前站点不存在编码');
					return
				}
				
				this.form.bottle_code[this.tagIndex] = this.value
				this.value = '';
				this.showEdit = false;
			},
			handleTag(e, index){
				this.value = e;
				this.tagIndex= index;
				this.showEdit = true;
			},
			...mapActions([]),
		},
		computed: {
			getBtnStyle() {
				let style = {};
				if (this.verCode.isDownIng) {
					style = Object.assign({}, this.$config.btnStyle3, {
						height: '80rpx',
						lineHeight: '80rpx',
						fontSize: '13px',
						width: '30%'
					})
				} else {
					style = Object.assign({}, this.$config.btnStyle2, {
						height: '80rpx',
						lineHeight: '80rpx',
						fontSize: '13px',
						width: '30%'
					})
				}
				return style;
			},
			...mapState({
				userInfo: 'userInfo',
			})
		},

	};
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/login.scss';

	.app {
		padding: 0 30rpx;
	}

	.btnbox {
		padding: 30rpx 0;
	}
	
	.tips{
		font-size: 13px;
		color: $color-yel;
		margin-top: 4px;
	}
	.tag-wrap{
		display: flex;
		flex-wrap: wrap;
		line-height: 1.5;
		.tag{
			display: inline-block;
			margin-right: 4px;
			margin-bottom: 4px;
		}
	}
	
	.int-wrap{
		background: #f5f5f5;
		margin-bottom: 20rpx;
		display: flex;
		border: 1px solid #ddd;
		.int{
			flex: 1;
			padding: 0 20rpx;
			border-radius: 5px;
		}
		.add{
			width: 100rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #55aa7f;
			font-size: 13px;
			text-align: center;
			border-radius: 5px;
			color: #fff;
		}
	}
	
	.btn-add{
		width: 100rpx;
		height: 70rpx;
		line-height: 70rpx;
		background: #55aa7f;
		font-size: 13px;
		text-align: center;
		border-radius: 5px;
		color: #fff;
		display: inline-block;
	}
	
	.send-popup{
		padding: 20rpx 30rpx;
		position: relative;
		.btn-close{
			position: absolute;
			right: 30rpx;
			top: 20rpx;
		}
		.title{
			text-align: center;
			font-size: 16px;
			margin-bottom: 20rpx;
		}
		.item{
			margin-bottom: 20rpx;
		}
		.label{
			font-size: 14px;
			margin-bottom: 6px;
		}
		.btnbox{
			padding-top: 30rpx;
		}
	}
	
	.input2{
		width: 100%;
		line-height: 80rpx;
		height: 80rpx;
	}
	.input2ply{
	}
</style>